<template>
  <div class="personal-wrapper">
    <div class="back-btn" @click="handleBack">
      <img src="@/assets/icon-common-back.png" class="back-icon" />
      <span class="text">返回</span>
    </div>
    <div class="personal-title">个人中心</div>
    <div class="personal-main">
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">头像</div>
          <div class="label-value">
            <img :src="infoData.avatar_url" alt="" class="avatar" />
          </div>
        </div>
        <div class="column-btn" @click="handleChangeAvatar">修改</div>
      </div>
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">姓名</div>
          <div class="label-value">
            {{ infoData.real_name }}
          </div>
        </div>
        <div class="column-btn" @click="handleChange(0)">修改</div>
      </div>
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">账号</div>
          <div class="label-value">
            {{ infoData.login_name }}
          </div>
        </div>
        <!-- <div class="column-btn" @click="handleChange(1)">修改</div> -->
      </div>
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">微信</div>
          <div class="label-value"></div>
        </div>
        <div class="column-btn" v-if="infoData.value?.weixins.length>0">已绑定</div>
        <div class="column-btn" v-else @click="handleChange(3)">绑定</div>
      </div>
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">密码</div>
          <div class="label-value">
            {{ infoData.login_password.replace(/./g, "*") }}
          </div>
        </div>
        <div class="column-btn" @click="handleChange(2)">修改</div>
      </div>
      <div class="personal-column">
        <div class="column-content">
          <div class="label-label">语言</div>
          <div class="label-value">
            <a-select
              ref="select"
              v-model:value="language"
              style="width: 120px"
              :bordered="false"
              @change="handleChageLanguage"
            >
              <a-select-option value="zh">中文</a-select-option>
              <a-select-option value="en">English</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a-modal v-model:open="isOpenAvatar" title="修改头像" :footer="null">
    <a-upload
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader"
      :multiple="false"
      :max-count="1"
      :customRequest="customUpload"
    >
      <img style="height: 200px; width: 200px" :src="imageUrl" alt="avatar" />
      <div class="avatar-btn">
        <plus-outlined></plus-outlined>
        <div class="ant-upload-text">{{ imageUrl ? "替换" : "上传" }}</div>
      </div>
    </a-upload>
    <div class="flex">
      <a-button @click="isOpenAvatar = false" style="margin-right: 12px">
        取消
      </a-button>
      <a-button type="primary" @click="handleChangeData"> 确定 </a-button>
    </div>
  </a-modal>
  <a-modal v-model:open="isOpen" :title="title" :footer="null">
    <div class="modal-content">
      <a-form layout="vertical" :model="formState" ref="formRef" :rules="rules">
        <a-form-item label="姓名" name="real_name" v-if="tab == 0">
          <a-input
            v-model:value="formState.real_name"
            placeholder="请输入账号"
          ></a-input>
        </a-form-item>
        <a-form-item label="账号" name="login_name" v-if="tab == 1">
          <a-input
            v-model:value="formState.login_name"
            placeholder="请输入账号"
          ></a-input>
        </a-form-item>
        <a-form-item label="密码" name="login_password" v-if="tab == 2">
          <a-input-password
            v-model:value="formState.login_password"
            placeholder="请输入账号"
          ></a-input-password>
        </a-form-item>
        <div v-if="tab == 3" class="qrcode">
          <div class="qrcode-title">请使用微信扫码</div>
          <!-- <img class="qrcode-img" :src="''" alt="" /> -->
          <div id="wxlogin" src="" class="wechat-code" alt="" />
        </div>
        <a-form-item>
          <div class="flex" v-if="tab != 3">
            <a-button @click="isOpen = false" style="margin-right: 12px">
              取消
            </a-button>
            <a-button type="primary" @click="handleChangeData"> 确定 </a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import api from "@/api";
import systemApi from "@/api/system";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const handleBack = () => {
  router.go(-1);
};
const isOpen = ref(false);
const title = ref("修改信息");
const formState = ref({
  login_name: "",
  login_password: "",
  real_name: "",
});
const infoData = ref({
  real_name: "",
  login_name: "",
  login_password: "",
});
const language = ref("zh");

const handleChageLanguage = () => {
  console.log(language.value);
  localStorage.setItem("language", language.value);
  if (language.value === "en") {
    window.translate.changeLanguage("english");
  } else {
    window.translate.changeLanguage("chinese_simplified");
  }
  window.translate.execute(); // 执行翻译
};
const getData = async () => {
  const user_id = JSON.parse(localStorage.getItem("userInfo")).user_id;
  const res = await api.apiUserFetchModelPost({ user_id: user_id });
  infoData.value = res.data;
  formState.value = res.data;
  imageUrl.value = res.data.avatar_url;
  localStorage.setItem("userInfo", JSON.stringify(res.data));
};

const initWeixinLogin = () => {
  api.apiUserArgsForLoginByWeixinPost().then((res) => {
    console.log(res.data);

    const appId = res.data.appId;
    const state = JSON.parse(localStorage.getItem("userInfo")).user_id;

    const redirect_uri = encodeURIComponent(
      "https://lib.fantasy-lab.com/api/User/HandleBindUserWeixinCode"
    );

    //微信登录
    var obj = new WxLogin({
      self_redirect: false,
      id: "wxlogin",
      appid: appId,
      scope: "snsapi_login",
      redirect_uri: redirect_uri,
      state: state,
      // style: "white",
      onReady: function (isReady) {
        console.log(isReady);
      },
    });
  });
};

const tab = ref(0);
const handleChange = (type) => {
  isOpen.value = true;
  tab.value = type;
  switch (type) {
    case 0:
      title.value = "修改姓名";
      formState.value.real_name = infoData.value.real_name;
      break;
    case 1:
      title.value = "修改账号";
      formState.value.login_name = infoData.value.login_name;
      break;
    case 2:
      title.value = "修改密码";
      formState.value.login_password = infoData.value.login_password;
      break;
    case 3:
      title.value = "绑定微信";
      initWeixinLogin();
      break;
  }
};
const isOpenAvatar = ref(false);
const handleChangeAvatar = () => {
  isOpenAvatar.value = true;
};
const imageUrl = ref("");
const customUpload = async (options) => {
  const { file, onSuccess, onError, onProgress } = options;
  try {
    onProgress({ percent: 50 });

    const response = await systemApi.FileUpload(file);

    if (response && response.url) {
      // formState.value.avatar_url = response.url;
      imageUrl.value = response.url;
      // getData();
    } else {
      console.error("API响应格式错误:", response);
      onError(new Error("上传失败：响应格式错误"));
    }
  } catch (error) {
    console.error("上传失败:", error);
    onError(error);
  }
};
const handleChangeData = async () => {
  formState.value.avatar_url = imageUrl.value;
  const res = await api.apiUserUpdatePost(formState.value);
  if (res.data) {
    message.success("修改成功");
    await getData();
    isOpenAvatar.value = false;
    isOpen.value = false;
  }
};
onMounted(() => {
  language.value = localStorage.getItem("language") || "zh";
  getData();
});
</script>
<style scoped lang="less">
.qrcode {
  overflow: hidden;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .qrcode-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
  }
  .qrcode-img {
    width: 200px;
    height: 200px;
    background-color: #999;
  }
}
.avatar-uploader {
  width: 200px;
  margin: 20px auto;
  display: block;
  position: relative;
  height: 200px;
  /deep/ .ant-upload {
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
  }
  /deep/.ant-upload-list-item-container {
    display: none !important;
  }
}
.avatar-btn {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e6ebf1;
}
.personal-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(180deg, #e9f2ff 0%, #eef6ff 100%);
  .back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    cursor: pointer;
    .back-icon {
      width: 16px;
      height: 16px;
    }
    .text {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #262930;
    }
  }
  .personal-title {
    height: 33px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #111a34;
    line-height: 33px;
    text-align: center;
    font-style: normal;
    margin-bottom: 24px;
  }
  .personal-main {
    width: 900px;
    background: #ffffff;
    border-radius: 12px;
    padding: 0 20px;
    .personal-column {
      height: 80px;
      background: #ffffff;
      border-bottom: 1px solid #e6ebf1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .column-content {
        display: flex;
        align-items: center;
        .label-label {
          height: 22px;
          width: 32px;
          margin-right: 40px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .lable-value {
          width: 32px;
          height: 44px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          line-height: 44px;
          text-align: center;
          font-style: normal;
        }
        .avatar {
          height: 44px;
          width: 44px;
          border-radius: 50%;
          background-color: #d8d8d8;
        }
      }
      .column-btn {
        padding: 0 30px;
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #bec4ca;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        line-height: 40px;
        text-align: center;
        font-style: normal;
        cursor: pointer;
      }
    }
  }
}
.flex {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
